<template>
  <!-- 雨情日报表 -->
  <div id="base">
    <!-- 搜索 -->
    <div class="search">
      <div class="searchTop">
        <el-form :inline="true" :model="search">
          <el-form-item label="日期选择">
            <el-date-picker
              v-model="search.time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getAddBook">查询</el-button>
            <el-button @click="empty" type="info">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮 -->
      <div class="searchBot">
        <!-- <el-button style="width:96px" class="buttonBot" type="primary" @click="notice">新增</el-button> -->
        <!-- icon="el-icon-plus" -->
        <!-- <el-button icon="el-icon-upload2" class="buttonBotLast" @click="excellist">导出数据</el-button> -->
      </div>
    </div>
    <div id="ehart1" ref="ehart1" :style="{width: '100%', height: '500px'}"></div>
  </div>
</template>
<script>
import { getTimeSeconds } from "../../utils/myMethod";
export default {
  data() {
    return {
      search: {
        time: getTimeSeconds(new Date())
      },
      data: {
        pagesize: 15,
        currpage: 1,
        list: []
      },
      dataX: [],
      dataY: [],
      Allnames: [],
      dataMsgs: [],
      count: [],
      end: 40
    };
  },
  created() {
    this.getList().then(res => {
      this.drawLine(res);
    });
  },
  methods: {
    table_index(index) {
      return (this.data.currpage - 1) * this.data.pagesize + (index + 1);
    },
    //获取列表数据
    getList() {
      let that = this;
      let time = that.search.time;
      return new Promise(function(resolve, reject) {
        that.$http
          .post("dataMsg/getAllWaterDetail", {
            time,
            dateType: "day"
          })
          .then(res => {
            if (res.data.length == 0) {
              that.$message({
                message: "该时间设备暂无数据,请选择其他时间查询",
                type: "warning",
                center: true
              });
              return;
            }
            let Allnames = [];
            // let dataX = [];

            let dataMsgs = [];
            // let dataYminLevel = [];
            // let dataYavgLevel = [];
            let count = 0;
            let list = [];
            res.data.forEach(data => {
              Allnames.push(data.stationName);
              let msg = {
                name: "",
                codes: [],
                times: [],
                levels: []
              };
              msg.name = data.stationName;
              let len = data.dataMsgs.length;
              for (let i = 1; i <= len; i++) {
                if (data.dataMsgs[i] != undefined) {
                  msg.codes.push(data.dataMsgs[i].code);
                  msg.times.push(data.dataMsgs[i].createTime);
                  msg.levels.push(data.dataMsgs[i].waterLevel);

                  if (i == data.dataMsgs.length - 1) {
                    // msg.codes = msg.codes.slice(len - 200, len);
                    // msg.times = msg.times.slice(len - 200, len);
                    // msg.levels = msg.levels.slice(len - 200, len);
                    if (count < msg.codes.length) {
                      count = msg.codes.length;
                    }
                    dataMsgs.push(msg);
                  }
                }
              }
            });
            for (let i = 1; i <= count; i++) {
              list.push(i);
            }
            that.count = list;
            if (count > 1000) {
              that.end = 5;
            } else if (count > 100 && count < 1000) {
              that.end = 10;
            } else {
              that.end = 40;
            }

            // console.log(that.count);

            that.Allnames = Allnames;
            that.dataMsgs = dataMsgs;
            resolve({ Allnames, dataMsgs });
          });
      });
    },

    drawLine(datas) {
      let myChart = this.$Echarts.init(document.getElementById("ehart1"));
      let series = [];
      let length = datas.dataMsgs.length;

      for (var i = 0; i < length; i++) {
        series.push({
          name: datas.dataMsgs[i].name,
          type: "line",
          // stack: "总量",
          time: datas.dataMsgs[i].times,
          data: datas.dataMsgs[i].levels
        });
      }

      // console.log("mini-4", series);

      let option = {
        title: {
          text: "水位日变化图（单位:CM）"
        },
        tooltip: {
          trigger: "item",
          // trigger: "axis",
          position: "bottom",
          textStyle: {
            align: "left"
          },

          formatter: function(params) {
            let station = {};
            option.series.forEach(item => {
              console.log(item);
              if (item.name == params.seriesName) {
                station = item;
                return;
              }
            });
            var res = "<div><p>" + params.seriesName + "</p></div>";

            res += "<div><p>当前水位:" + params.data + "CM</p></div>";
            res +=
              "<div><p>更新时间:" +
              station.time[params.dataIndex] +
              "</p><div>";
            return res;
          }
        },

        legend: {
          x: "300px",
          y: "0px",
          data: datas.Allnames
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.count,
          show: false,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#DFE3E9", // x轴颜色
              width: 1 // 粗细
            }
          },
          axisLabel: {
            color: "#999999", // x轴刻度名称颜色
            interval: 0, //代表显示所有x轴标签显示
            rotate: 45 //代表逆时针旋转45度
          }
        },
        yAxis: {
          type: "value",
          splitNumber: 30,
          axisLabel: {
            color: "#999999", // y轴刻度名称颜色
            formatter: function(value) {
              var value;
              
              if (value >= 1000) {
                value = value / 1000 + "K";
              } else if (value < 1000) {
                value = value;
              }

              return value;
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          }
        },
        series: series,
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: 0,
            filterMode: "empty",
            start: 0, //数据窗口范围的起始百分比,表示30%
            end: this.end
          }
        ]
      };
      myChart.setOption(option, true);
    },

    //查询
    getAddBook() {
      this.getList().then(res => {
        this.drawLine(res);
      });
    },
    //清空

    empty() {
      this.search = {
        time: getTimeSeconds(new Date())
      };
      this.getList().then(res => {
        this.drawLine(res);
      });
    },
    // 翻页
    nextpage(value) {
      this.data.currpage = value;
    },
    // 显示条数切换
    sizeChange(total) {
      this.data.pagesize = total;
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  display: flex;
  justify-content: space-between;
}
.tableButton3 {
  color: #fff;
  background-color: #f56c6c;
  border-radius: 3px;
}
.textmsg {
  color: red;
}
.textcc {
  color: #000;
}
.paginationList {
  text-align: center;
  margin-top: 32px;
  padding: 0;
}
.table {
  width: 1128px;
  height: 465px;
  margin-top: 16px;
}
.dialogText {
  .el-input {
    width: 240px;
    height: 32px;
  }
  .selectTop {
    width: 240px;
    height: 32px;
  }
  .selectBot {
    width: 240px;
    height: 32px;
  }
}
.formButon {
  width: 127px;
  height: 40px;
  text-align: center;
}

.pagination {
  text-align: center;
  margin-right: 25px;
  padding-top: 20px;
}
.green {
  color: green;
}
.red {
  color: red;
}
#ehart1 {
  margin-top: 22px;
  width: 886px;
  height: 252px;
}
</style>
